<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in letters" >{{item}}</li>
  </ul>
    <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const  app = new Vue({
      el:'#app',
      data:{
        letters: ['a', 'b', 'c', 'd']
      },
      methods: {
          btnClick() {
              //1.push方法,可以一次性多个元素
              // this.letters.push('wj');
              //并不是所有方法都能做到响应式

              //2.通过索引值修改数组中的元素
              // this.letters[0] = '123';

              //3.pop()删掉最后一个，响应式
              // this.letters.pop();

              //4.shift()删除第一个，响应式
              // this.letters.shift();

              //5.unshift()在数组最前面添加元素，响应式
              // this.letters.unshift('aaa','sda','wsss');

              //splice作业：插入元素，删除元素，替换元素
              //第一参数是从哪个开始
              //如果是删除元素，第二个参数传入你要删除几个元素
              // splice(start):
              // this.letters.splice(1,1);

              //如果替换元素，第二参数是表示我们要替换几个元素
              // this.letters.splice(1,4,'w','j','a','m')

              //如果插入元素，第二个参数为0，后面跟上插入的元素就行
              // this.letters.splice(1,0,'x','y','z')

              //sort() 排序
              // this.letters.sort();

              //reverse() 反转
              this.letters.reverse();
          }
      }
    })
</script>
</body>
</html>